<template>
  <div class="my-basq">
    <van-tabs color="#2CBE9C" swipeable>
      <van-tab title="未完成">
        <van-search
          v-model="value"
          shape="round"
          background="#fbfbfb"
          placeholder="请输入搜索关键词"
          class="search-form"
        />
        <div class="card">
          <div class="card-hd">
            <span class="title">商州区I企业投资项目水电气通信报装接入“- -件事”</span>
            <span class="desc">商洛市教育局</span>
          </div>
          <div class="card-bd">
            <div class="time">2021-11-13   12:13:46</div>
            <div class="btn-group">
              <van-button type="default" class="btn-small" disabled round>已提交</van-button>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-hd">
            <span class="title">商州区I企业投资项目水电气通信报装接入“- -件事”</span>
            <span class="desc">商洛市教育局</span>
          </div>
          <div class="card-bd">
            <div class="time">2021-11-13   12:13:46</div>
            <div class="btn-group">
              <van-rate
                v-model="value"
                :size="20"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                readonly
              />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <van-search
          v-model="value"
          shape="round"
          background="#FBFBFB"
          placeholder="请输入搜索关键词"
          class="search-form"
        />
        <div class="card">
          <div class="card-hd">
            <span class="title">商州区I企业投资项目水电气通信报装接入“- -件事”</span>
            <span class="desc">商洛市教育局</span>
          </div>
          <div class="card-bd">
            <div class="time">2021-11-13   12:13:46</div>
            <div class="btn-group">
              <van-button type="primary" class="btn-small btn-error" round @click="changeEvaluateShow">评价</van-button>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!--    <van-dialog v-model:show="evaluateShow" title="标题">-->
    <!--      <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />-->
    <!--    </van-dialog>-->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import {
  Button as VanButton,
  Tab as VanTab,
  Tabs as VanTabs,
  Search as VanSearch,
  Rate as VanRate,
  // Dialog as VanDialog,
} from "vant";
export default defineComponent({
  name: "MakeThing",
  components: {
    VanTab,
    VanTabs,
    VanSearch,
    VanButton,
    VanRate,
    // VanDialog,
  },
  setup() {
    const router = useRouter();
    let evaluateShow = ref<boolean>(false);
    const openWin = (name: any) => {
      router.push({
        name: name,
      });
    };
    const changeEvaluateShow = () => {
      evaluateShow.value = !evaluateShow.value;
    };
    return {
      openWin,
      changeEvaluateShow,
      evaluateShow,
    };
  },
});
</script>

<style scoped lang="scss">
@import "~@/assets/scss/pub.scss";
.van-tab--active{
  font-size: pxToVw(30);
}
.search-form {
  padding: pxToVw(20) pxToVw(20);
}

.card{
  margin: 0 auto pxToVw(20) auto;
  width: pxToVw(700);
  background-color: #FFFFFF;
  .card-hd{
    padding: pxToVw(25) pxToVw(20);
    .title{
      display: inline-block;
      color: #333333;
      font-size: pxToVw(32);
    }
    .desc{
      color: #9B9B9B;
      font-size: pxToVw(28);
    }
    position: relative;
    &:before{
      position: absolute;
      left: 0;
      bottom: 0;
      content: "";
      height: 1px;
      width: pxToVw(700);
      background-color: #D8D8D8;
    }
  }
  .card-bd {
    padding-left: pxToVw(25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #9B9B9B;
    font-size: pxToVw(28);
  }
}
</style>
